{% extends 'base.html' %} {% block title %}主页{% endblock %} {% block content %}
<!-- Page Heading -->
<!-- <h1 class="h3 mb-2 text-gray-800">Tables</h1>
<p class="mb-4">DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the <a target="_blank" href="https://datatables.net">official DataTables documentation</a>.</p> -->
<!-- DataTales Example -->
<div class="mb-4">
  <a class="btn btn-primary btn-user" onclick="cancel()" style="color: #fff;display: none;" id="canlshares"><i class='fas fa-ban'></i>&ensp;取消分享</a>
</div>
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary" id="fileroute"><a href="javascript:void(0);">全部文件</a></h6>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th>
              <input type="checkbox" class="checkall" />
            </th>
            <th class="sorting">文件名</th>
            <th class="sorting">大小</th>
            <!-- <th class="sorting">提取码</th>
            <th class="sorting">链接</th> -->
            <th class="sorting">过期时间</th>
            <th class="sorting">操作</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

{% endblock %} {% block scripts %} {{ super() }}
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
<script>
  $(function () {
    //选中菜单栏中的选项
    $('#share-page').attr('class','nav-item active')
  })
  //表格(DataTables)-4，综合示例
  var language = {
    search: '搜索：',
    lengthMenu: '每页显示 _MENU_ 记录',
    zeroRecords: '没找到相应的数据！',
    info: '分页 _PAGE_ / _PAGES_',
    infoEmpty: '暂无数据！',
    infoFiltered: '(从 _MAX_ 条数据中搜索)',
    paginate: {
      first: '首页',
      last: '尾页',
      previous: '上一页',
      next: '下一页',
    },
  }

  var urldir = "{{ url_for('share.page') }}"

  $('#dataTable').dataTable({
    autoWidth: false,
    lengthChange: true, //不允许用户改变表格每页显示的记录数
    pageLength: 10, //每页显示几条数据
    lengthMenu: [5, 10, 20, 40], //每页显示选项
    pagingType: 'full_numbers',
    // bStateSave: true,
    ajax: {
      url: urldir,
      type: 'POST',
      // 传给服务器的数据，可以添加我们自己的查询参数
    },
    ordering: false,
    columns: [
      {
        sClass: 'text-center',
        data: 'code',
        bSortable: false,
        render: function (data, type, full, meta) {
          return "<input type='checkbox' class='checkchild' onclick='checkboxClick()' id='" + data + "'" + '/>'
        },
      },
      {
        data: 'filename',
        orderable: false,
        render: function (data, type, row, meta) {
          filetype = getFileType(data)
          urlfor = window.location.host + "{{ url_for('share.show', code = '') }}" + row.code
          return "<div><img src='/static/img/" + filetype + ".png'>&ensp;" + data + '<p style="display:none" copy="'+row.code+'">链接: ' + urlfor + ' 提取码: ' + row.getcode + '</p></div>'
        },
      },
      { data: 'filesize', orderable: true },
      // { data: 'getcode', orderable: false },
      // {
      //   data: 'code',
      //   orderable: false,
      //   render: function (data, type, row, meta) {
      //     urlfor = "{{ url_for('share.show', code = '') }}" + data
      //     return "<a target='_blank' href='" + urlfor + "'>" + window.location.host + urlfor + '</a>'
      //   },
      // },
      {
        data: 'validdate',
        orderable: false,
        render: function (data, type, row, meta) {
          pattern = /^[\u4E00-\u9FA5]{2,4}$/
          //中文判断
          if (pattern.test(data)) {
            return data
          } else {
            return moment(data).fromNow()
          }
        },
      },
      {
        sClass: 'text-nowrap',
        data: null,
        orderable: false,
        render: function (data, type, row, meta) {
          urlfor = window.location.host + "{{ url_for('share.show', code = '') }}" + data.code
          var action_html = "<a class='btn btn-danger btn-circle btn-sm'  href='javascript:void(0);' onclick='deletefile(this.id)' id='" + data.code + "' data-toggle='tooltip' title='取消分享'><i class='fas fa-trash'></i></a>&ensp;"
          action_html += "<a class='btn btn-primary btn-circle btn-sm' href='javascript:void(0);' onclick='copyclick(this.id)' id='copylink' data-toggle='tooltip' title='复制链接和提取码' data-clipboard-text='链接: " + urlfor + ' 提取码: ' + data.getcode + "'copyid='"+data.code+"'><i class='fas fa-copy'></i></a>&ensp;"
          return action_html
        },
      },
    ],
    language: language,
  })

  var t = $('#dataTable').DataTable()

  //列表全选
  $('.checkall').click(function () {
    var check = $(this).prop('checked')
    $('.checkchild').prop('checked', check)
    checkboxClick()
  })

  //删除
  function deletefile(id) {
    var id = id
    swal(
      {
        title: '操作提示',
        text: `是否取消id为“${id}”的分享？`,
        type: 'warning',
        showCancelButton: true,
        showLoaderOnConfirm: true,
        confirmButtonColor: '#4D9BFF',
        confirmButtonText: '是的，确定取消！',
        cancelButtonText: '关闭',
        closeOnConfirm: true,
        closeOnCancel: true, //关闭取消后还弹出让你确认的效果提示
        timer: 200,
      },
      function (isConfirm) {
        if (isConfirm) {
          var param = { code: id }
          urlfor = "{{ url_for('share.delete') }}"
          $.ajax({
            url: urlfor,
            datatype: 'json',
            type: 'post',
            data: param,
            beforeSend:function(){
              loading()
            },
            complete: function () {
              removeLoading('test')
            },
            success: function (data) {
              if (data.code == 0) {
                t.ajax.reload(null, false)
                iziToast.success({
                  title: '成功',
                  message: '已经取消该分享',
                })
              }else{
                console.log(data)
                iziToast.warning({
                  title: '失败',
                  message: data.msg,
                })
              }
            },
            error: function (response) {
              console.log(response)
              iziToast.error({
                title: '出错了',
                message: '服务器返回了错误响应',
              })
            },
          })
        }
      }
    )
  }

  //取消分享
  function cancel(){
    swal(
      {
        title: '操作提示',
        text: `是否取消选中的分享？`,
        type: 'warning',
        showCancelButton: true,
        showLoaderOnConfirm: true,
        confirmButtonColor: '#4D9BFF',
        confirmButtonText: '是的，确定取消！',
        cancelButtonText: '关闭',
        closeOnConfirm: true,
        closeOnCancel: true, //关闭取消后还弹出让你确认的效果提示
        timer: 200,
      },
      function (isConfirm) {
        if (isConfirm) {
          var code=[]
          for(var i=0;i<$(".checkchild:checked").length;i++){
            code[i]=$($(".checkchild:checked")[i]).attr('id')
          }
          //value = Base64.encode(nowPath)
          var param = { "code": JSON.stringify(code) }
          var urlfor = "{{ url_for('share.deletes') }}"
          $.ajax({
            url: urlfor,
            datatype: 'json',
            type: 'post',
            data: param,
            beforeSend:function(){
              loading()
            },
            complete: function () {
              removeLoading('test')
            },
            success: function (data) {
              if (data.code == 0) {
                t.ajax.reload(null, false)
                iziToast.success({
                  title: '成功',
                  message: '已经取消选中的分享',
                })
              } else {
                console.log(data)
                iziToast.warning({
                  title: '失败',
                  message: data.msg,
                })
              }
            },
            error: function (response) {
              console.log(response)
              iziToast.error({
                title: '出错了',
                message: '服务器返回了错误响应',
              })
            },
          })
        }
      }
    )
  }
  

  function checkboxClick(){
    //获取选中的某一个checkbox的值
    if ($(".checkchild:checked").length >= 1){
      $("#canlshares").show()
      return
    }
    $("#canlshares").hide()
  }

  //初始化复制模块
  var clipboard = new ClipboardJS('#copylink')
  clipboard.on('success', function (e) {
    console.log(e)
    //显示提取码
    var copyid=$(e.trigger).attr("copyid")
    var copy=$("[copy='"+copyid+"']")
    copy.show()
    iziToast.success({
      title: '成功',
      message: '链接和提取码已经复制到剪切板',
    })
  })
  clipboard.on('error', function (e) {
    console.log(e)
    iziToast.error({
      title: '失败',
      message: '浏览器不支持复制到剪切板',
    })
  })
</script>
{% endblock %}
